﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('input[type=text]').keypress(function (e) {
                var me = $(this);
                var py = me.parent().siblings('.input-group').find('input[name=output]');
                if (e.keyCode == 13) {
                    var hanzi = me.val().trim();

                    $.get('Pinyin4NetHandler.ashx', {
                        dt: new Date().getTime(),
                        hanzi: hanzi,
                        multi: $('#multi').val(),
                        casetype: $('#caseType').val(),
                        tonetype: $('#toneType').val(),
                        vtype: $('#vType').val()
                    }, function (pinyin) {
                        py.val(pinyin);
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div style="width:680px;margin: 0 auto;">
        <h1>Pinyin4Net Web Demo</h1>
        <div class="panel panel-default">
            <div class="panel-heading">
                选项
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="input-group-addon">大小写类型</span>
                            <select class="form-control" id="caseType">
                                <option value="UPPERCASE">大写</option>
                                <option value="LOWERCASE" selected="selected">小写</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="input-group-addon">声调</span>
                            <select class="form-control" id="toneType">
                                <option value="WITH_TONE_MARK" selected="selected">声调标志</option>
                                <option value="WITH_TONE_NUMBER">声调数值</option>
                                <option value="WITHOUT_TONE">无声调</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="input-group-addon">字符v输出格式</span>
                            <select class="form-control" id="vType">
                                <option value="WITH_U_UNICODE" selected="selected">ü</option>
                                <option value="WITH_V">v</option>
                                <option value="WITH_U_AND_COLON">u:</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="input-group-addon">多音字取</span>
                            <select class="form-control" id="multi">
                                <option value="FIRST" selected="selected">第一个</option>
                                <option value="ALL">全部</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                汉字转拼音
            </div>
            <div class="panel-body">
                <div class="input-group">
                    <span class="input-group-addon">汉字</span>
                    <input type="text" class="form-control" value="Javascript 爱好者 传说" />
                    <span class="input-group-addon">按回车触发</span>
                </div>
                <br />
                <div class="input-group">
                    <span class="input-group-addon">拼音</span>
                    <input type="text" name="output" class="form-control" placeholder="汉字转拼音结果" readonly="readonly" />
                </div>
            </div>
        </div>
        代码：<a href="http://www.hyjiacan.com/post/pinyin4net/?from=py4n" target="_blank">PINYIN4NET .NET 使用的拼音库</a>
    </div>
</body>
</html>
